<template>
  <div class="cont" ref="fullscreenContainer">
    <Myhead title="Ai违章抓拍" />
    <div class="w">
      <div class="left" @click="handleJump">
        <!-- <transition name="el-zoom-in-center" > -->
        <div class="aibox" v-for="(item, index) in AiList" :key="index">
          <img
            :src="item.bigImageURL"
            alt=""
            style="
              width: 1.6719rem;
              height: 1.0365rem;
              border-radius: 0.0754rem;
            "
          />
          <div class="connect">
            <span class="aiboxxx" v-if="item.alarmType == 4"
              >类型:<img
                src="../../assets/images/hat.png"
                alt=""
                class="aiico"
              />未佩戴安全帽</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 6"
              >类型:<img
                src="../../assets/images/phone.png"
                alt=""
                class="aiico"
              />打电话检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 7"
              >类型:<img
                src="../../assets/images/smoke.png"
                alt=""
                class="aiico"
              />吸烟检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 8"
              >类型:<img
                src="../../assets/images/fire.png"
                alt=""
                class="aiico"
              />明火烟雾检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 16"
              >类型:睡岗检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 17"
              >类型:离岗检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 20"
              >类型:<img
                src="../../assets/images/ruqin.png"
                alt=""
                class="aiico"
              />区域入侵</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 21"
              >类型:电动车禁入</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 22"
              >类型:车辆违停占用（消防车通道占用）</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 62"
              >类型:<img
                src="../../assets/images/diedao.png"
                alt=""
                class="aiico"
              />跌倒检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 33"
              >类型:口罩检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 65"
              >类型:反光衣/带检测</span
            >
            <span class="aiboxxx" v-else-if="item.alarmType == 114"
              >类型:<img
                src="../../assets/images/phone.png"
                alt=""
                class="aiico"
              />玩手机检测</span
            >
            <span class="aiboxxx" v-else>类型:{{ item.alarmType }}</span>
            <span>时间:{{ item.time }}</span>
            <span>地点:{{ item.channelName }}</span>
          </div>
        </div>
        <!-- </transition> -->
      </div>
    </div>
    <audio src="../../assets/images/hat.mp3" ref="hat" ></audio>
    <audio src="../../assets/images/dadianhua.mp3" ref="dadianhua" ></audio>
    <audio src="../../assets/images/fire.mp3" ref="fire" ></audio>
    <audio src="../../assets/images/ruqin.mp3" ref="ruqin" ></audio>
    <audio src="../../assets/images/shuaidao.mp3" ref="shuaidao" ></audio>
    <audio src="../../assets/images/smoke.mp3" ref="smoke" ></audio>
    <audio src="../../assets/images/phone.mp3" ref="phone" ></audio>
    <Myfoot />
  </div>
</template>

<script>
import Myhead from "./components/my-head.vue";
import Myfoot from "./components/my-foot.vue";
import { AiList } from "@/api";
export default {
  data() {
    return {
      AiList: [],
    };
  },
  methods: {
    handleJump() {
      console.log("1111");
      // this.$router.push('/')
    },
    getAiList() {
      AiList().then((res) => {
        console.log(res);
        this.AiList = res.data.data;
      });
    },
    redirectToPage() {
    // 使用setTimeout()函数设置定时器，参数1表示要等待的时间（单位为毫秒），参数2表示要执行的函数或者代码片段
    var aitime = setTimeout(() => {
      // 这里写入需要执行的跳转逻辑，比如路由导航到其他页面
      this.$router.push('/project')
    }, 30000); // 3000ms = 3s，表示等待3秒后再执行跳转操作
  },
    m1(){
      this.$refs.hat.currentTime = 0;
          this.$refs.hat.play();
    },
    m2(){
      this.$refs.dadianhua.currentTime = 0;
          this.$refs.dadianhua.play();
    },
    m3(){
      this.$refs.smoke.currentTime = 0;
          this.$refs.smoke.play();
    },
    m4(){
      this.$refs.fire.currentTime = 0;
          this.$refs.fire.play();
    },
    m5(){
      this.$refs.ruqin.currentTime = 0;
          this.$refs.ruqin.play();
    },
    m6(){
      this.$refs.shuaidao.currentTime = 0;
          this.$refs.shuaidao.play();
    },
    m7(){
      this.$refs.phone.currentTime = 0;
          this.$refs.phone.play();
    },
    initWs2() {
      this.ws2 = new WebSocket("ws://192.168.110.46:8010/websocketAlarm");
      this.ws2.onopen = () => {
        console.log("socket 已连接222222");
      };

      this.ws2.onmessage = ({ data }) => {
        const jssss = JSON.parse(data);

        console.log(jssss);
        this.getAiList();
        if (jssss.alarmType == 4) {
            this.m1()
        } else if (jssss.alarmType == 6) {
          this.m2()
        } else if (jssss.alarmType == 7) {
          this.m3()
        } else if (jssss.alarmType == 8) {
          this.m4()
        } else if (jssss.alarmType == 20) {
          this.m5()
        } else if (jssss.alarmType == 62) {
          this.m6()
        } else if (jssss.alarmType == 114) {
          this.m7()
        }
      };
      this.ws2.onerror = (e) => {
        console.log("发生错误", e);
      };
      this.ws2.onclose = () => {
        console.log("socket closed2222222222222222222222");
      };
    },
  },
  beforeDestroy() {
    this.ws2.close();
    // alert('1111')
  },
  components: {
    Myhead,
    Myfoot,
  },

  mounted() {
    this.getAiList();
    this.initWs2();
    this.redirectToPage()
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.w {
  display: flex;
  width: 9.8333rem;
  margin: 0 auto;
  justify-content: space-between;
}
.left {
  width: 9.8333rem;
  height: 80vh;
  margin-top: 0.1823rem;
  border-radius: 0.0208rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(0.1615rem);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-shadow: 0px 0.0521rem 0.0781rem 0px rgba(3, 30, 62, 0.3);
}
.aibox {
  width: 4.6354rem;
  height: 29%;
  border-radius: 0.0754rem;
  background: rgba(8, 14, 27, 0.5);
  margin-top: 0.1042rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.connect {
  height: 1.0365rem;
  display: flex;
  flex-direction: column;
  font-size: 0.1875rem;
  justify-content: space-around;
}
.aiico {
  width: 0.3594rem;
  height: 0.3594rem;
}
.aiboxxx {
  display: flex;
  align-items: center;
}
</style>
